<template>
    <div class="setting">
        <!-- 设置 -->
        <div class="setting-content">
            <Header title="设置" />
            <div class="setting-content-img">
                <img :src="img" alt="">
                <h4>{{username}}</h4>
                <p><router-link to='/personal/setting/edit'>编辑</router-link></p>
            </div>
            <div class="setting-content-detail iconfont"><router-link to="/">
              <p>
                手机号
                <span>&#xe7eb;</span>
                <span class="detail-msg">{{pho}}</span>
              </p>
            </router-link></div>
            <div class="setting-content-detail iconfont"><router-link to="/personal/setting/setting-pass">
              <p>
                更改密码
                <span>&#xe7eb;</span>
              </p>
            </router-link></div>
            <div class="setting-content-detail iconfont"><router-link to="/"><p>*****<span>&#xe7eb;</span></p></router-link></div>
            <div class="setting-content-detail iconfont"><router-link to="/"><p>*****<span>&#xe7eb;</span></p></router-link></div>
            <div class="setting-content-detail"><router-link to="/personal/login"><p>切换账户</p></router-link></div>
            <div class="setting-content-detail" @click="exit()"><p>退出</p></div>
        </div>
    </div>
</template>

<script>
import { garbageMixin } from '../../utils/mixin'
import { clearLocalStorage, getLocalStorage } from '../../utils/localStorage'
import Header from '../common/Header'

export default {
  components: {
    Header
  },
  mixins: [garbageMixin],
  data () {
    return {
      img: 'http://img3.imgtn.bdimg.com/it/u=2778838901,1985278700&fm=15&gp=0.jpg',
      username: 'green',
      pho: ''
    }
  },
  methods: {
    exit () {
      let sessionId = getLocalStorage('sessionId')
      if (!sessionId) {
        this.$router.push('./')
        this.$message({
          message: '请先登录',
          type: 'warning'
        })
        return
      }
      this.$axios.delete('/user', {headers: {'sessionId': sessionId}})
        .then((res) => {
          if (res.data.code === 1) {
            this.$message({
              message: '退出成功',
              type: 'success'
            })
            clearLocalStorage()
            this.userSessionId = ''
            sessionStorage.clear()
            this.searchValue = []
            this.$router.push('/')
          }
        })
    }
  },
  mounted () {
    let userImg = getLocalStorage('userImg')
    let userName = getLocalStorage('userName')
    let userPhone = getLocalStorage('userPhone')
    if (userImg === null) {
      this.img = 'http://img3.imgtn.bdimg.com/it/u=2778838901,1985278700&fm=15&gp=0.jpg'
    } else if (userImg !== '') {
      this.img = userImg
    } else {
      this.img = 'http://img3.imgtn.bdimg.com/it/u=2778838901,1985278700&fm=15&gp=0.jpg'
    }
    if (userName === null) {
      this.username = 'green'
    } else if (userName !== '') {
      this.username = userName
    } else {
      this.username = 'green'
    }
    if (userPhone === null) {
      this.pho = ''
    } else if (userPhone !== '') {
      this.pho = userPhone
    } else {
      this.pho = ''
    }
  }

}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global";
.setting {
    width: 100%;
    .setting-content {
        width: 100%;
        .setting-content-title {
            width: 100%;
            height: 40px;
            font-size: 14px;
            display: flex;
            justify-content: center;
            position: relative;
            p {
                align-self: center;
                a {
                    position: absolute;
                    left: 12px;
                    font-size: 16px;
                    text-decoration: none;
                }
            }

        }
        .setting-content-img {
            width: 100%;
            height: 80px;
            background: #fff;
            font-size: 14px;
            border-bottom: 1px solid #eee;
            position: relative;
            display: flex;
            padding-left: 12px;
            img {
                align-self: center;
                width: 56px;
                // height: 40px;
                border: 1px solid #eee;
                border-radius: 50%
            }
            h4 {
                position: absolute;
                top: 35px;
                left: 80px;
            }
            p {
                position: absolute;
                top: 30px;
                right: 26px;
                width: 36px;
                height: 18px;
                padding-top: 4px;
                text-align: center;
                border: 1px solid skyblue;
                border-radius: 4px;
                a {
                    color: skyblue;
                    text-decoration: none;
                }
            }
        }
        .setting-content-detail {
            height: 50px;
            background: #fff;
            font-size: 14px;
            padding-left: 12px;
            display: flex;
            position: relative;
            &:nth-child(3) {
                margin-bottom: 10px;
            }
            &:nth-child(7) {
                text-align: center;
                margin-top: 10px;
            }
            &:nth-child(8) {
                text-align: center;
                margin-top: 10px;
                display: flex;
                p {
                  align-self: center;
                  width: 100%;
                }
            }
            a {
                color: black;
                text-decoration: none;
                display: flex;
                width: 100%;
                p {
                    align-self: center;
                    width: 100%;
                    span {
                        position: absolute;
                        top: 20px;
                        right: 12px;
                        color: #ccc
                    }
                    .detail-msg {
                      margin-right: 16px;
                    }
                }
            }
        }
    }
}
</style>
